<template>
  <div class="menu">
    <div class="item" v-for="(item, index) in menu"
         :key="index"
         @click="open(item.link)">
      <div class="content">
        <img :src="item.icon" class="icon">
        <div class="name">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import IconMenuZyxx from './cm_zyxx.png';
import IconMenuGdgl from './cm_gdgl.png';
import IconMenuGjcx from './cm_gjcx.png';
import IconMenuZlbc from './cm_zlbc.png';
import IconMenuZtfx from './cm_ztfx.png';
import IconMenuXngl from './cm_xngl.png';
import IconMenuFgcx from './cm_fgcx.png';
import IconMenuKhfw from './cm_khfw.png';

export default {
  name: 'quick-menu',
  data() {
    return {
      menu: [
        { name: '资源信息', icon: IconMenuZyxx, link: 'resource' },
        { name: '工单管理', icon: IconMenuGdgl, link: 'order' },
        { name: '告警查询', icon: IconMenuGjcx, link: 'alarm' },
        { name: '质量拨测', icon: IconMenuZlbc, link: 'dial' },
        { name: '专题分析', icon: IconMenuZtfx, link: 'subject' },
        { name: '性能管理', icon: IconMenuXngl, link: 'business' },
        { name: '覆盖查询', icon: IconMenuFgcx, link: '' },
        { name: '客户服务', icon: IconMenuKhfw, link: 'service' }
      ]
    };
  },
  methods: {
    open(path) {
      this.$router.push({
        name: path,
        query: {
          timestamp: new Date().getTime()
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .menu
    padding-top : 20px
    overflow : hidden
    background : #fff
    border-radius : 6px
    font-size : 0

  .item
    float : left
    margin-bottom : 20px
    width : 25%

  .content
    margin : 0 auto
    text-align : center

  .icon
    display : inline-block
    margin-bottom : 10px
    width : 72px
    height : 72px
    border-radius : 50%

  .name
    text-align : center
    font-size : 24px

</style>
